<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>display研究</title>
    <style>
        * {
            box-sizing: border-box;
        }
        p{
            white-space: pre-wrap;
        }
        .container{
            display: table;
            width: 100%;
            border: 1px solid #06c;
            padding: 0 .3em;
        }
        ul{
            display: table;
            border-right: 1px solid #ccc;
            width: 100%;
            padding: 0;
        }
        li{
            display: table-cell;
            border: 1px solid #ccc;
            border-right: none;
            line-height: 100px;
            text-align: center;
            /*min-width: 80px;*/
        }
        img{
            display: table-cell;
            /*height: 100px;*/
            margin: auto;
        }
        .content {
            display: table;
            border: 1px solid #06c;
            padding: 15px 5px;
            max-width: 1000px;
            margin: 10px auto;
            min-width: 320px;
            width: 100%;
        }

        .img-box{
            width: 100px;
            border:1px solid red;
            display: table-cell;
            vertical-align: middle;
            text-align: center;
            background-color:#4679bd;
        }
        .text-box{
            margin-left: 20px;
            border: 1px solid #ddd;
            padding: 10px;
        }
    </style>
</head>
<body>
    <section>
        <h1>display:table/table-cell</h1>
        <div class="container">
            <ul>
                <li>1</li>
                <li>2</li>
                <li>3</li>
                <li>4</li>
                <li>5</li>
                <li>6</li>
            </ul>
        </div>
        <p>display:table-cell
            行内元素会独占一行,类似块级
            块级元素反而变成行元素</p>
        <div class="content">
            <div class="">
                <img width="50" src="../public/images/qrcode.jpg" alt="qr code"/>
            </div>
            <div class="text-box">
                <span>对对对方一见钟情后，所以就愉快的生活在了一起。。。。枯地;枯f基flsd faskldf aldf asld fjasdlf asdf sdlf jasdlf asjdf asdksd lfsd hellsdo fsld 枥规模最大对对方一见钟情后，所以就愉快的生活在了一起。。。。枯地;枯f基flsd faskldf aldf asld fjasdlf asdf sdlf jasdlf asjdf asdksd lfsd hellsdo fsld 枥规模最大对对方一见钟情后，所以就愉快的生活在了一起。。。。枯地;枯f基flsd faskldf aldf asld fjasdlf asdf sdlf jasdlf asjdf asdksd lfsd hellsdo fsld 枥规模最大对方一见钟情后，所以就愉快的生活在了一起。。。。枯地;枯f基flsd faskldf aldf asld fjasdlf asdf sdlf jasdlf asjdf asdksd lfsd hellsdo fsld 枥规模最大
                </span>
            </div>
        </div>

        <p>
            这里右边的内容变多,img不会变大,还是原始大小但img-box会变大
        </p>
        <div class="content">
            <div class="img-box">
                <img src="http://jsfiddle.net/img/logo@2x.png" width="50" alt="logo" />
            </div>
            <div class="text-box">
                <span>对对方一见钟情后，所以就愉快的生活在了一起。。。。枯地;枯f基flsd faskldf aldf asld fjasdlf asdf sdlf jasdlf asjdf asdksd lfsd hellsdo fsld 枥规模最大 。</span>
            </div>
        </div>
    </section>
</body>
</html>